<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    @keyframes shake {
      0% {
        transform: translateX(-100px);
      }

      50% {
        transform: translateX(-50px);
      }

      100% {
        transform: translateX(50px);
      }
    }

    .v-enter-from {
      color: red;
    }

    .v-enter-active,
    .v-leave-active {
      /* transition: opacity 3s ease-out; */
      animation: shake 5s;
      transition: color 3s ease-in;
    }

    .v-enter-to {
      color: green;
    }

    /* .v-enter-from{
      opacity: 1;
    } */
    .v-leave-to {
      color: red;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script>
    //单元素，但组件入场出场动画
    const app = Vue.createApp({
      data() {
        return {
          show: false
        }
      },
      methods: {
        click() {
          this.show = !this.show
        },
        beforeEnter(el) {
          el.style.color = "red"
        },
        enter(el, done) {
          const a = setInterval(() => {
            let color = el.style.color;
            color === 'red' ? el.style.color = 'green' : el.style.color = 'red'
          }, 1000)
          setTimeout(() => {
            clearInterval(a)
            done()
          }, 3000)
        },
        afterEnter() {
          // alert(1234)
        }
      },
      //有了name v要替换成hello,可以自定义类名 name="hello" 
      //enter-active-class="enter" leave-active-class="leave"
      //可以结合动画库实现
      template:
        `<transition 
          type="transition" :duration="{enter:1000,leave:3000}"
          :css="false" @before-enter="beforeEnter" @enter="enter" 
          @after-enter="afterEnter">
        <div v-show="show">hello</div>
        </transition>
      <button @click="click">切换</button>`
    });

    app.component('', {
      template: ``
    });

    const vm = app.mount('#root');
  </script>
</body>

</html>